<template>
  <component
    :is="item.children ? 'el-sub-menu' : 'el-menu-item'"
    :index="item.index"
    :class="{ active: item.index === store.loginInfo.defaultAct }"
    @click="toPage(item)"
  >
    <view class="flexst">
      <svg-icon :name="item.icon" class="menu-icon" color="#ffffff"/>
      <text v-show="!store.loginInfo.isCollapse">{{ item.name }}</text>
    </view>
    <template v-if="item.children">
      <MenuItem
        v-for="childItem in item.children"
        :key="childItem.index"
        :item="childItem"
        :permitUrl="permitUrl"
      />
    </template>
  </component>
</template>

<script setup lang="ts">
import { defineProps, PropType } from 'vue';
import useMenuStore from '@/stores/modules/menu';
import MenuItem from './components/menu-item.vue';
const store = useMenuStore();
interface MenuItem {
  index: string | number;
  icon: string;
  name: string;
  children?: MenuItem[];
}

defineProps({
  item: {
    type: Object as PropType<MenuItem>,
    required: true,
  },
  permitUrl: {
    type: Array as PropType<string[]>,
    required: true,
  },
});

const emits = defineEmits(['toPage'])

const toPage = (item: MenuItem) => {
  // 点击菜单项时执行的方法
  // ... 你的处理逻辑
  emits('click', item);
}
</script>